@import '../../base/index';
html,
body {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
div {
  box-sizing: border-box;
}
// 背景
@mixin coverBg($img) {
  background: url($img) no-repeat center;
  background-size: 100%;
  background-position: center center;
}
.audio-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.aud,.aud1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.msg {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  top: 0;
  left: 0;
  text-align: center;
  padding:  0 1.2rem /* 30/25 */;
  padding-top: 7rem;
  input {
    width: 100%;
    font-size: .64rem /* 16/25 */;
    height: 1.2rem /* 40/25 */;
    outline: none;
    border: none;
    padding-left: .4rem /* 10/25 */;
    margin-top: .5rem;
  }
  .login {
    width: 7rem /* 100/25 */;
    height: 2rem /* 40/25 */;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e75866;
    font-size: .64rem /* 16/25 */;
    color: #fff;
    margin: .8rem /* 20/25 */ auto 0 auto;
  }
  .card {
    width: 5rem /* 100/25 */;
    height: 2rem /* 40/25 */;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e75866;
    font-size: .64rem /* 16/25 */;
    color: #fff;
    margin: .8rem /* 20/25 */ auto 0 auto;
    img {
      margin-right: .4rem /* 10/25 */;
    }
  }
  .text {
    margin-top: .8rem /* 20/25 */;
    font-size: .64rem /* 16/25 */;
    color: #e2cb9a;
  }
}
.aud1 {
  left: 375px;
}
#audio, #audio1 {
  width: 100%;
  height: 100%;
}